<template>
	<view>
		<view class="grid-box">
			<view class="u-flex">
				<view class="u-m-r-20"><u-icon name="clock" size="80" :color="$u.color.infoDark"></u-icon></view>
				<view class="u-flex-1">
					<view class="head-title u-m-b-10"><text>{{orderForm.state}}</text></view>
					<view class="tips-txt"><text>请与站点确认并上传回执单</text></view>
				</view>
				<view class="">
					<u-image :src="orderForm.barcode" width="80rpx" mode="widthFix" @click="seePhoto(orderForm.barcode)"></u-image>
				</view>
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>订单信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">订单编号：</text>
					<view class="text">{{orderForm.number}}</view>
				</view>
				<view class="item">
					<text class="label">出库到：</text>
					<view class="text">{{orderForm.packstation.name}}</view>
				</view>
				<view class="item">
					<text class="label">出库时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.createddatetime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item">
					<text class="label">完结时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.endtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<!-- <view class="item">
					<text class="label">出库总量：</text>
					<view class="text">{{orderForm.weight}}KG/{{orderForm.quantity}}件</view>
				</view>
				<view class="item">
					<text class="label">出库总价值：</text>
					<view class="text">{{orderForm.amount}}元</view>
				</view> -->
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-30"><text>查看站点出库明细(共{{orderForm.store.length}}个)</text></view>
			<!-- <u-collapse :item-style='{"border-bottom":"1px solid #e4e7ed"}' style="border-top: 1px solid #e4e7ed;">
				<u-collapse-item :title="item.store.name" v-for="(item,index) in orderForm.store" :key="index">
					<goods-list :orderId="orderId" :deliverdetails="item.details"></goods-list>
					<view>
						<view class="u-m-b-15">
							<text class="u-tips-color">共计重量/数量：{{item.weight}}KG/{{item.quantity}}件；总价值{{item.costamount}}元</text>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse> -->
			<u-cell-group class="u-m-t-20">
				<u-cell-item 
					:title="item.store.name"  
					:label="`共计重量/数量：${item.weight}KG/${item.quantity}件；总价值${item.costamount}元`"
					v-for="(item,index) in orderForm.store" 
					:key="index" 
					@click="storeDetails(item.details)"
					class="u-p-r-0 u-p-l-0">
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="grid-box" v-if="orderForm.remarks">
			<view class="head-title u-m-b-20"><text>备注</text></view>
			<view style="padding: 10px;border-color: rgb(220, 223, 230);text-align: left;border-radius: 4px;border: 1px solid #dcdfe6;min-height: 62px;">{{orderForm.remarks}}</view>
		</view>
		<!-- <view class="grid-box">
			<view class="head-title u-m-b-10"><text>简要信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">重量：</text>
					<view class="text">{{orderForm.weight}}KG</view>
				</view>
				<view class="item">
					<text class="label">数量：</text>
					<view class="text">{{orderForm.quantity}}件</view>
				</view>
			</view>
		</view> -->
		
		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>出库完结时间</text></view>
			<view class="msg-box">
				<u-cell-group>
					<u-cell-item title="选择时间" @click="chooseTime = true" class="u-p-l-0 u-p-r-0">
						<view slot="right-icon">
							{{endTime}}
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>回执单</text></view>
			<view>
				<u-cell-group class="u-m-t-20">
					<u-cell-item :title="item.typename" v-for="(item, index) in packDetailsList" :key="index" @click="seePack(item,index)"
						class="u-p-r-0 u-p-l-0">
						<view slot="label">
							<view class="u-flex">
								<view class="u-flex-1">
									{{item.weight}}{{item.isweighing?'KG':'件'}} x {{item.price}}元
								</view>
								<!-- <view class="u-flex-1 u-text-right u-color-orange">
									<text>金额：{{parseFloat(item.amount).toFixed(2)}}</text>元
								</view> -->
							</view>
						</view>
					</u-cell-item>
				</u-cell-group>
				<u-button type="primary" @click="addPack">添加回执单</u-button>
			</view>
		</view>
		
		<view class="navigation">
			<view class="right">
				<!-- <u-button class="navbtn" @click="show1 = true">取消</u-button> -->
				<u-button class="navbtn" @click="back">返回</u-button>
				<u-button type="primary" class="navbtn" @click="endOrder">完成</u-button>
			</view>
		</view>
		<!-- 添加回执单 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable z-index="998">
			<scroll-view class="u-p-30" :scroll-y="true" style="box-sizing: border-box;" v-if="show">
				<view style="max-height:80vh;">
					<view><text class="u-font-32" style="font-weight: bold;">回执单录入</text></view>
					<view class="u-flex u-p-t-50 u-m-b-20">
						<view class="u-w-530">
							<view class="head-title u-m-b-10 e-flex-1"><text class="u-font-32">拍照上传回执单</text></view>
							<view><text class="u-tips-color u-font-28">请拍照回执单并填写下方表单信息</text></view>
						</view>
						<view>
							<common-upload max-count="1" @on-success="receipUploadSuccess" @on-remove="receipRemovePhoto"></common-upload>
						</view>
					</view>
					<!-- 按重量 -->
					<u-form :model="packDetails" ref="uForm" label-width="200">
						<u-form-item label="选择回收物">
							<!-- <u-input v-model="packDetails.typename" type="select" placeholder="请输入选择回收物" :border="true" @click="chooseShow = true"/> -->
							<view class="u-flex" style="width: 100%;" @click="chooseProduct"><text class="u-flex-1">{{packDetails.typename || '请点击选择回收物'}}</text><u-icon name="arrow-right" class="u-tips-color"></u-icon></view>
						</u-form-item>
						<u-form-item :label="`${isweighing?'重量(KG)':'数量(件)'}`">
							<u-input v-model="packDetails.weight" placeholder="请输入重量" :border="true" @input="totalAmount(packDetails)"/>
						</u-form-item>
						<u-form-item :label="`单价(元/${isweighing?'KG':'件'})`">
							<u-input v-model="packDetails.price" placeholder="请输入金额" :border="true" @input="totalAmount(packDetails)"/>
						</u-form-item>
						<!-- <u-form-item label="金额(元)">
							<u-input v-model="packDetails.amount" placeholder="请输入金额" :border="true"/>
						</u-form-item> -->
						<u-form-item label="备注">
							<u-input v-model="packDetails.remarks" type="textarea" placeholder="请输入备注" :border="true"/>
						</u-form-item>
					</u-form>
					<template v-if="isedit">
						<view class="u-p-b-30"><u-button type="primary" @click="edit(packDetails)">修改</u-button></view>
						<view><u-button @click="delPackDetails(packDetails.index)">删除</u-button></view>
					</template>
					<template v-else>
						<u-button type="primary" @click="addPackDetails">确定</u-button>
					</template>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 选择分类 -->
		<u-popup v-model="chooseShow" mode="bottom" :closeable="true" border-radius="14">
			<goods-choose :single="true" :isWeighing="isweighing" @confirm="confirmChoose"></goods-choose>
		</u-popup>
		<!-- 选择完结时间 -->
		<u-picker v-model="chooseTime" mode="time" :params="params" @confirm="changeTime"></u-picker>
		<!-- 取消订单 -->
		<!-- <u-popup v-model="show1" mode="center" border-radius="14" z-index="999" closeable>
			<view class="u-p-40" style="width: 600rpx;">
				<view class="u-p-t-30 u-p-b-15">请填写取消出库原因：</view>
				<view class="u-p-b-30">
					<u-input v-model="cancelForm.reason" type="textarea" :border="true" />
				</view>
				<u-button type="error" class="navbtn" @click="cancelOrder">确定</u-button>
			</view>
		</u-popup> -->
		<!-- 站点出库详情 -->
		<u-popup v-model="showStoreDetails" mode="bottom" :closeable="true" border-radius="14">
			<view class="u-p-l-30 u-p-r-30 u-p-t-80 u-p-b-60">
				<goods-table :details="storeItem"></goods-table>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props:{
			orderId: 0,
			orderForm: {}
		},
		data() {
			return {
				loading: true,
				// 拍照
				fileList: [],
				// 装车提交
				proves: [],
				// 回执信息
				packDetails: {
					typename: '',
					largeId: 0,
					productId: 0,
					remarks: "",
					weight: null,
					price: null
				},
				isweighing: true,//上传回执单类型，true为按重量，false为按数量
				rules: {
					// number: [
					// 	{ 
					// 		required: true, 
					// 		message: '请输入磅单号', 
					// 		trigger: 'change'
					// 	}
					// ],
					// typename: [
					// 	{ 
					// 		required: true, 
					// 		message: '请输入产品类型', 
					// 		trigger: 'change'
					// 	}
					// ],
					// grossweight: [
					// 	{ 
					// 		required: false, 
					// 		message: '请输入毛重(KG)', 
					// 		trigger: 'change'
					// 	}
					// ],
					// tareweight: [
					// 	{ 
					// 		required: false, 
					// 		message: '请输入皮重(KG)', 
					// 		trigger: 'change'
					// 	}
					// ],
					weight: [
						{
							required: false, 
							message: '请输入重量(KG)', 
							trigger: 'change'
						}
					],
					// deductionweight: [
					// 	{
					// 		required: false, 
					// 		message: '请输入扣重(KG)', 
					// 		trigger: 'change'
					// 	}
					// ],
					// deductionratio: [
					// 	{
					// 		required: true, 
					// 		message: '请输入扣点', 
					// 		trigger: 'change'
					// 	}
					// ],
					price: [
						{
							required: true, 
							message: '请输入单价(元/KG)', 
							trigger: 'change'
						}
					],
					// amount: [
					// 	{
					// 		required: true, 
					// 		message: '请输入金额(元)', 
					// 		trigger: 'change'
					// 	}
					// ],
					img: [
						{
							required: true, 
							message: '请拍照上传回执单', 
							trigger: 'change'
						}
					]
				},
				packDetailsList: [],
				show: false,
				// show1: false,
				// cancelForm: {
				// 	id: 0,
				// 	reason: ""
				// },
				isedit: false,
				index: 0,
				// 装车证明图片列表
				endProves: [],
				chooseShow: false,
				// 选择出库完结时间
				endTime: '',
				chooseTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				fileUploadURL: getApp().globalData.fileUploadURL,
				// 查看站点出库详情
				showStoreDetails: false,
				storeItem: []
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			}),
			...mapState('brother', {
				goodsDetails: state => state.goodsDetails,
			})
		},
		watch:{
			show(val){
				if(!val){
					this.packDetails = {
						typename: '',
						largeId: 0,
						productId: 0,
						remarks: "",
						weight: null,
						price: null
					},
					this.fileList = []
				}
			},
			goodsDetails(value){
				let confirmForm = {
					orderid: this.orderId,
					details: value
				}
				this.confirmChoose(confirmForm)
			}
		},
		mounted() {
			console.log('this.orderForm:',this.orderForm)
			// this.orderForm.details.forEach((item,index)=>{
			// 	item.details.forEach((cell,i)=>{
			// 		cell.img = this.orderForm.endproves[i]
			// 		cell.weight = cell.netweight
			// 	})
			// })
			this.loading = false
			this.$forceUpdate()
			// console.log(this.orderForm.packdetails)
		},
		methods: {
			// 查看地图
			goMap(lat,lng){
				uni.navigateTo({
					url: `/pages/brother/order/views/map/map?lat=${lat}&lng=${lng}`
				})
			},
			// 回执单选择可回收物品
			chooseProduct(){
				uni.navigateTo({
					url: `/pages/brother/goodsChoose/goodsChoose?orderId=${this.orderId}&single=true`,
				});
			},
			// 上传装车证明回调
			provesUploadSuccess(data, index, lists, name) {
				this.endProves.push(data.datas.path)
			},
			// 删除装车证明回调
			provesRemovePhoto(index, lists, name) {
				this.fileList.splice(0, 1)
				this.endProves.splice(index, 1)
				// this.packDetailsList = [];
			},
			// 查看回执单单个详情
			seePack(item,index){
				this.fileList = [
					{
						url: this.fileURL + this.endProves[index]
					}
				]
				this.isedit = true
				this.index = index
				this.packDetails = item
				this.packDetails.index = index
				this.packDetails.img = this.endProves[index]
				this.isweighing = this.packDetails.isweighing
				this.show = true
			},
			storeDetails(details){
				this.storeItem = []
				details.forEach((item)=>{
					item.details.forEach((cell)=>{
						this.storeItem.push({
							"show": false,
							"id": cell.productid,
							"price": cell.sellprice,
							"weight": cell.weight,
							"amount": cell.sellamount,
							"typeremarks": cell.remarks,
							"allowedit": true,
							"minprice": 0,
							"highprice": 0,
							"err": false,
							"typenames": item.names,
							"name": cell.productname,
							"isweighing": cell.weight > 0?true:false,
							"typeid": item.id,
							"pic": item.icon,
							"on": true
						})
					})
				})
				this.showStoreDetails = true
			},
			edit(data){
				this.packDetailsList[this.index] = data
				this.show = false
			},
			// 删除回执单
			delPackDetails(index){
				uni.showModal({
					content: '您确定要删除该回执单吗？',
					success: (res)=> {
						if (res.confirm) {
							this.packDetailsList.splice(index,1)
							this.endProves.splice(index, 1)
							this.show = false
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 上传回执单回调
			receipUploadSuccess(data, index, lists, name) {
				this.endProves.push(data.datas.path)
				this.packDetails.img = data.datas.path
				// uni.showLoading({
				// 	title: '上传中,请稍后'
				// })
				// this.$u.get('Brother/DeliverOrder/DistinguishEndProves',{
				// 	fileName: data.datas.path
				// }).then((res)=>{
				// 	//console.log(res)
				// 	uni.hideLoading()
				// 	this.packDetails = res
				// 	this.packDetails.img = data.datas.path
				// 	this.totalAmount(res)
				// }).catch(()=>{
				// 	uni.hideLoading()
				// })
			},
			// 删除回执单回调
			receipRemovePhoto(index, lists, name) {
				this.fileList.splice(0, 1)
				this.endProves.splice(index, 1)
				this.packDetailsList.splice(index, 1)
				this.packDetails.img = ''
				// this.packDetailsList = [];
			},
			// 完成订单
			endOrder(){
				if(this.endTime == ''){
					uni.showToast({
						title: '请选择出库完结时间',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '您确定要提交完成订单吗?',
					success: (res) => {
						if (res.confirm) {
							let form = {
								id: this.orderId,
								details: this.packDetailsList,
								proves: this.endProves,
								endTime: this.endTime
							}
							console.log('出库订单完结提交参数：',form)
							this.$u.post('/PackStation/InOrder/End', form).then((res) => {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
								this.$emit('update')
							})
						}
					}
				})
			},
			//选择回执单类型 
			addPack(){
				// uni.showActionSheet({
				// 	itemList: ['按重量录入', '按数量录入'],
				// 	success: (res)=> {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 		if(res.tapIndex == 0){
				// 			this.isweighing = true
				// 			this.isedit = false
				// 		}else{
				// 			this.isweighing = false
				// 			this.isedit = false
				// 		}
				// 		this.show = true
				// 	}
				// })
				this.isedit = false
				this.show = true
			},
			// 添加回执单列表
			addPackDetails(){
				// 验证
				let valid = true; // 默认通过
				for(let key in this.rules){
					
					let obj =  this.rules[key][0]
					if(obj.required){ // 是否必填
						if(this.packDetails[key] == '' || this.packDetails[key] == null){
							uni.showToast({
								title: obj.message,
								icon: 'none'
							})
							valid = false
						}
					}
				}
				// 用于判断是按重量还是按数量
				this.packDetails.isweighing = this.isweighing
				// if(this.packDetails.isweighing == false){
				// 	this.packDetails.deductionratio = 100
				// }
				
				if(valid){
					this.packDetailsList.push(this.packDetails)
					this.show = false
				}
			},
			// 图片上传
			uploadSuccess(data, index, lists, name) {
				console.log(data)
				// this.showUploadList = false
				this.proves.push(data.datas.path);
			},
			removePhoto() {
				this.fileList.splice(0, 1)
				this.proves = [];
				// console.log(this.fileList)
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					title: '提交失败，请重试'
				})
			},
			// 订单详情
			detailsOrder(id){
				uni.navigateTo({
					url: '/pages/brother/order/views/views?id='+id
				})
			},
			// getDetails(id){
			// 	this.$u.get('Brother/DeliverOrder/Details?id='+id).then((res)=>{
			// 		this.orderForm = res
			// 	})
			// },
			seePhoto(url){
				let img = this.fileURL + url
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			// 关闭分拣清算窗口
			confirmChoose(confirmForm){
				console.log(confirmForm)
				this.packDetails.productId = confirmForm.details[0].id
				this.packDetails.largeId = confirmForm.details[0].typeId
				this.packDetails.typename = confirmForm.details[0].name
				this.isweighing = confirmForm.details[0].isweighing
				this.chooseShow = false
			},
			totalAmount(item){
				// this.packDetails.amount = item.weight * item.price
			},
			// 选择出库完结时间
			changeTime(e){
				console.log(e);
				this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			back(){
				uni.redirectTo({
					url: '/pages/brother/outOrder/outOrder'
				})
			},
			// 取消出库单
			// cancelOrder(){
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '您确定要取消出库单吗?',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				this.cancelForm.id = this.orderId
			// 				this.$u.post('/Brother/Order/Cancel',this.cancelForm).then((res)=>{
			// 					uni.showToast({
			// 						icon: 'none',
			// 						title: res.msg
			// 					})
			// 					this.show1 = false
			// 					this.$emit('update')
			// 				})
			// 			}
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.u-color-orange{
		color: $u-color-orange;
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;
		.head-title{
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			position: sticky;
			top: 0;
			.more{
				color: $u-color-blue;
			}
		}
		.tips-txt{
			color: $u-tips-color;
			font-size: 24rpx;
		}
	}
	// 订单
	.order {
		// width: 690rpx;
		// background-color: #ffffff;
		// margin: 30rpx auto;
		// border-radius: 30rpx;
		// box-sizing: border-box;
		// padding: 30rpx;
		// font-size: 28rpx;
		// box-shadow: $u-color-border-shadow;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
			.left {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}
		.time{
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				padding: 0 10rpx;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
	// 按钮栏
	.navigation {
		display: flex;
		margin-top: 30rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		position: sticky;
		bottom: 0;
		z-index: 99;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			flex: 1;
			justify-content: space-around;
			padding: 20rpx;
			.navbtn{
				width: 100%;
				margin: 0 10rpx;
			}
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				margin: 16rpx 0;
			}
			.cancel {
				margin-right: 30rpx;
				color: $u-tips-color;
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
	// 拍照
	.upload-box{
		.item{
			display: inline-block;
			margin: 20rpx 10rpx 20rpx 0
		}
	}
	// 
	.u-table-box{
		margin: 20rpx 0;
		.green{
			background-color: $u-color-green;
			color: #fff!important;
		}
		.red{
			background-color: $u-color-red;
			color: #fff!important;
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}

	.u-line{
		border-bottom: 1px solid $u-border-color;
		padding-top: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.pack{
		display: flex;
		align-items: center;
		width: 630rpx;
		margin: 20rpx 0;
		.item{
			display: block;
			width: 200rpx;
			flex: 1;
			
			.name{
				color: $u-color-dark;
			}
			.text{
			}
		}
		// .icon{
		// 	font-size: 60rpx;
		// 	padding: 0 80rpx;
		// 	transform: rotate(90deg);
		// 	color: var(--gray);
		// }
	}
</style>
